<script setup lang="ts">
definePageMeta({
  layout: 'default',
  title: '邮件',
  i18n: 'menu.email',
})
const router = useRouter();
const { t } = useI18n();
const tabArr = [
  {
    id: 0,
    name: t('my_page.email.all')
  },
  {
    id: 1,
    name: t('my_page.email.readed')
  },
  {
    id: 2,
    name: t('my_page.email.read')
  },
]
const allArr = [
  {
    id: 0,
    name: '邮件标题1',
    time: '2025-04-23 18:00:00',
    cont: '我是内容啊我是内容啊我是内容啊我是内容啊',
    isRead: true
  },
  {
    id: 1,
    name: '邮件标题2',
    time: '2025-04-23 18:00:00',
    cont: '我是内容啊我是内容啊我是内容啊我是内容啊我是内容啊我是内容啊我是内容啊我是内容啊',
    isRead: false
  },
  {
    id: 2,
    name: '邮件标题4',
    time: '2025-04-23 18:00:00',
    cont: '我是内容啊我是内容啊',
    isRead: true
  },
]

const goDetails = (v: any) => {
  router.push({
    path: '/my/email/info',
    query: {
      v: v.id
    }
  })
}
const menuAactive = ref(0)
const handleClickTab = () => { }
</script>

<template>
  <div mx-auto text-16 text-dark dark:text-white pt-23 w-full>
    <!-- tab标签 -->
    <van-tabs v-model:active="menuAactive" swipeable sticky class="px-15">
      <van-tab v-for="(item, index) in tabArr" :key="item.name">
        <template #title>
          <div class="flex items-center">
            <span :class="menuAactive == index ? 'color-#eef3ff' : 'inactive'
              ">
              {{ item.name }}</span>
          </div>
        </template>
      </van-tab>
    </van-tabs>
    <!---->
    <!-- 内容 -->
    <div class="px-15 list mt-20">
      <div class="item-box py-15  px-10 rounded-6 mb-10" v-for="(v, i) in allArr" :key="i">
        <div class="flex items-end justify-between  " @click="goDetails(v)">
          <div class="flex items-center w-full">
            <div class="w-47">
              <div class="img-box ">
                <img v-if="v.isRead" src="/email/reading.png" alt="" class="w-full">
                <img v-else src="/email/unread.png" alt="" class="w-full">
              </div>
            </div>
            <div class="right ml-10 w-full">
              <span class="font-bold text-13 mb-4 color-#fffefe">{{ v.name }}</span><span class="dot"
                v-if="v.isRead"></span>
              <div class="text-12 text-#9ca2a3 w-260 overflow-hidden whitespace-nowrap text-ellipsis line-clamp-2">{{
                v.cont
              }}</div>

            </div>
          </div>
        </div>
        <div>
          <div class="text-12 text-right color-#9ca2a3">{{ v.time }}</div>
        </div>
      </div>
    </div>
    <div class="tips text-12 color-#6a6d76">{{ t('my_page.email.notes') }}</div>
  </div>
</template>
<style lang="css" scoped>
.tips {
  width: 100%;
  height: 42px;
  line-height: 42px;
  position: fixed;
  bottom: 0;
  font-size: 12px;
  color: #fffefe;
  background: #292e30;
  opacity: 0.7;
  margin: auto;
  text-align: center;
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 5px;
  vertical-align: 1px;
  background-image: linear-gradient(0deg,
      #44ff98 14%,
      #38f88e 51%,
      #2cf083 100%),
    linear-gradient(#2cf083,
      #2cf083);
  border-radius: 50%;
}

.right {
  width: calc(100% - 57px);
}

.item-box {
  background: #323838;
}

.img-box {
  width: 47px;
  height: 47px;
  /* background-image: linear-gradient(0deg,
      #69cdff 20%,
      #3dacff 100%),
    linear-gradient(#3dacff,
      #3dacff);
  border-radius: 50%;
  border: solid 1px rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: center;
  align-items: center; */
}


::v-deep .van-tabs__line {
  background: transparent;
  height: 30px;
  padding-bottom: 0;
}

::v-deep .van-tabs__nav--line {
  padding-bottom: 0;
}

.tabs .tab-item {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: #ffffff;
}

::v-deep .van-tab {
  color: #ffffff;
}

/* ::v-deep .van-tabs {
  padding: 8px 15px;
} */

::v-deep .van-tabs--line .van-tabs__wrap {
  background: #16161a;
  border-radius: 20px;
}

.inactive {
  filter: brightness(0) saturate(100%) invert(44%) sepia(8%) saturate(697%) hue-rotate(185deg) brightness(91%) contrast(90%);
}

::v-deep .tabs .van-swipe-item .van-tab__panel-wrapper {
  background: #ffffff;
}

::v-deep .van-tabs__nav {
  background: transparent;
  padding: 0 10px;

}

::v-deep .van-tab--active {
  margin-top: 7px;
  background: url("/imgs/tabs_active_bg.png") no-repeat;
  background-size: 100% 100%;
  height: 30px;
  border-radius: 30px;
  background: #323838;
}

::v-deep .van-tab--active img {
  width: 22px;
}
</style>